import styles from './index.module.scss'
import { useDispatch } from 'react-redux'
import { addCart } from '../../../store/modules/foodStore'
const imgData = require('../../../assets/img/f1.jpeg')

const Foods = ({
  id,
  picture,
  name,
  unit,
  description,
  food_tag_list,
  month_sale,
  like_ratio_desc,
  price,
  tag,
  count
}) => {
  const dispatch = useDispatch()
  const addList =()=>{
    dispatch(addCart({
      id,
      picture,
      name,
      unit,
      description,
      food_tag_list,
      month_sale,
      like_ratio_desc,
      price,
      tag,
      count
    }))
  }
  return (
    <div className={styles['cate-goods']}>
      <div className="goods-img-wrap">
        {/*<img src={picture} alt="" className="goods-img" />*/}
        <img src={imgData} alt="" className="goods-img" />
      </div>
      <div className="goods-info">
        <div className="goods-desc">
          <div className="goods-title">{name}</div>
          <div className="goods-detail">
            <div className="goods-unit">{unit}</div>
            <div className="goods-detail-text">{description}</div>
          </div>
          <div className="goods-tag">{food_tag_list.join(' ')}</div>
          <div className="goods-sales-volume">
            <span className="goods-num">月售{month_sale}</span>
            <span className="goods-num">{like_ratio_desc}</span>
          </div>
        </div>
        <div className="goods-price-count">
          <div className="goods-price">
            <span className="goods-price-unit">¥</span>
            {price}
          </div>
          <div className="goods-count">
            <span className="plus" onClick={addList}>+</span>
          </div>
        </div>
      </div>
    </div>
  )
}

export default Foods
